import styles from './index.module.scss'
import cls from 'classnames'
import Link from 'next/link'

const Index = props => {
  const { top = 0, bottom = 0, className } = props
  const style = {
    marginTop: top,
    marginBottom: bottom
  }
  return (
    <>
      <div className={cls(styles.guideDownload, className, 'hideWhenPhone')} style={style}>
        <Link
          href="/download"
          className={cls(styles.guide, styles.guidePhone, 'hideWhenPhone')}
          onClick={() => sessionStorage.setItem('downloadType', 'phone')}
        >
          <img loading="lazy" src="/images/guide-phone.webp" alt="手机" className={styles['guide-img']} />
          <img
            loading="lazy"
            src="/images/guide-triangle.png"
            alt="三角形"
            className={cls(styles['guide-triangle'], styles['guide-triangle1'])}
            style={{ right: '21.35%' }}
          />
          <img
            loading="lazy"
            src="/images/guide-triangle.png"
            alt="三角形"
            className={cls(styles['guide-triangle'], styles['guide-triangle2'])}
            style={{ right: 'calc(21.35% + 50px)' }}
          />
          <img
            loading="lazy"
            src="/images/guide-triangle.png"
            alt="三角形"
            className={cls(styles['guide-triangle'], styles['guide-triangle3'])}
            style={{ right: 'calc(21.35% + 100px)' }}
          />
          <span className={styles['guide-text']}>随时随地观看最新剧集</span>
          <div className={styles['guide-btn']} width={146 / 16 + 'rem'} height={44 / 16 + 'rem'}>
            <img loading="lazy" src="/images/phoneBtn.png" className="hideWhenPhone" alt="手机" />
            <span>安卓端下载</span>
          </div>
        </Link>
        <Link
          href="/download"
          className={cls(styles.guide, styles.guideTv, 'hideWhenPhone')}
          onClick={() => sessionStorage.setItem('downloadType', 'tv')}
        >
          <img loading="lazy" src="/images/guide-tv.webp" alt="电视" className={styles['guide-img']} />
          <span className={styles['guide-text']}>高清大屏观看最新剧集</span>
          <img
            loading="lazy"
            src="/images/guide-polygon-bottom.png"
            alt="多边形"
            className={cls(styles['guide-polygon'], styles['guide-polygon-top'], styles['guide-polygon1'])}
            style={{ right: '29.427%', top: -20 }}
          />
          <img
            loading="lazy"
            src="/images/guide-polygon-bottom.png"
            alt="多边形"
            className={cls(styles['guide-polygon'], styles['guide-polygon2'])}
            style={{ right: 'calc(29.427% + 70px)', top: -20 }}
          />
          <img
            loading="lazy"
            src="/images/guide-polygon-top.png"
            alt="多边形"
            className={cls(styles['guide-polygon'], styles['guide-polygon3'])}
            style={{ right: '25%', bottom: -20 }}
          />
          <img
            loading="lazy"
            src="/images/guide-polygon-top.png"
            alt="多边形"
            className={cls(styles['guide-polygon'], styles['guide-polygon4'])}
            style={{ right: 'calc(25% + 70px)', bottom: -20 }}
          />
          <div className={styles['guide-btn']} width={146} height={44}>
            <img loading="lazy" src="/images/tvBtn.png" className="hideWhenPhone" alt="电视" />
            <span>电视端下载</span>
          </div>
        </Link>
      </div>
      <div className={cls(styles.guideDownloadPhone, 'hideWhenPc')}>
        <Link href="/download" className={styles.guide} onClick={() => sessionStorage.setItem('downloadType', 'phone')}>
          <img src="/images/down-h5-phone.webp" alt="手机下载" />
        </Link>
        <Link href="/download" className={styles.guide} onClick={() => sessionStorage.setItem('downloadType', 'tv')}>
          <img src="/images/down-h5-tv.webp" alt="手机下载" />
        </Link>
      </div>
    </>
  )
}

export default Index
